<template>
  <div class="archive">
    <el-card>
      <!-- <div class="title" @click="showContent=!showContent">
        <div class="left">
          全公司
        </div>
        <div class="right">
          <el-date-picker
            v-model="value3"
            type="year"
            placeholder="选择年"
          />
        </div>
      </div>
      <div v-if="showContent" class="content">content</div> -->
      <el-row type="flex" :class="{'titleCard':showContent}">
        <el-col :span="20">
          <div class="title">
            全公司
          </div>
        </el-col>
        <el-col :span="4">
          <div style="padding-bottom: 10px;">
            <el-date-picker
              v-model="selYear"
              type="year"
              placeholder="选择年"
              size="mini"
              format="yyyy"
              value-format="yyyy"
              @change="changeYear"
            />
          </div>
        </el-col>
      </el-row>
      <div v-if="showContent" class="content">
        <el-table
          :data="tableData"
          style="width: 100%"
          :show-header="false"
        >
          <el-table-column label="name" prop="name">
            <template slot-scope="scope">
              <el-row style="height: 70px;">
                <el-col :span="1" class="contentC" @click="showTable"><el-link :underline="false"><i class="el-icon-arrow-right" /></el-link></el-col>
                <el-col :span="4" style="border-right: 1px solid #e5e9f2;">
                  <el-row style="line-height: 35px;">
                    <span style="font-size: 18px;margin-right: 10px;">社保报表</span> {{ scope.row.yearsMonth }}
                  </el-row>
                  <el-row style="line-height: 35px;">
                    <el-link :underline="false" @click="showTable"><span style="font-size: 18px;">社保报表</span></el-link>
                  </el-row>
                </el-col>
                <el-col :span="4" class="contentC" style="border-right: 1px solid #e5e9f2;">
                  <el-row style="line-height: 35px;">
                    <span>企业缴纳</span>
                  </el-row>
                  <el-row style="line-height: 35px;">
                    <el-link :underline="false"><span style="font-size: 18px;">{{ scope.row.enterprisePayment }}</span></el-link>
                  </el-row>
                </el-col>
                <el-col :span="4" class="contentC" style="border-right: 1px solid #e5e9f2;">
                  <el-row style="line-height: 35px;">
                    <span>个人缴纳</span>
                  </el-row>
                  <el-row style="line-height: 35px;">
                    <el-link :underline="false"><span style="font-size: 18px;">{{ scope.row.personalPayment }}</span></el-link>
                  </el-row>
                </el-col>
                <el-col :span="4" class="contentC" style="border-right: 1px solid #e5e9f2;">
                  <el-row style="line-height: 35px;">
                    <span>合计</span>
                  </el-row>
                  <el-row style="line-height: 35px;">
                    <el-link :underline="false"><span style="font-size: 18px;">{{ Number(scope.row.enterprisePayment) +Number(scope.row.personalPayment) }}</span></el-link>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="isShowTable" class="content2">
        <el-row style="height: 50px;line-height: 50px;">
          <el-col v-for="item in titleList" :key="item.name" :span="2">
            <span :style="{backgroundColor: item.color}" style="width: 15px;height: 15px; display: inline-block;" />
            {{ item.name }}
          </el-col>
          <el-col :span="2" :offset="12" style="text-align: right;">
            <el-button type="primary" @click="exportExcel">导出</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-table
            :data="tableData2"
            style="width: 100%"
            max-height="450px"
            cell-class-name="columnW"
          >
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column label="姓名" prop="username" :width="columnW" />
            <el-table-column label="入职时间" prop="timeOfEntry" :width="columnW" />
            <el-table-column label="手机号" prop="mobile" :width="columnW" />
            <el-table-column label="身份证号码" prop="idNumber" width="240" />
            <el-table-column label="学历" prop="theHighestDegreeOfEducation" :width="columnW" />
            <el-table-column label="开户行" prop="openingBank" :width="columnW" />
            <el-table-column label="一级部门" prop="firstLevelDepartment" :width="columnW" />
            <el-table-column label="二级部门" prop="twoLevelDepartment" :width="columnW" />
            <el-table-column label="工作城市" prop="workingCity" :width="columnW">
              <template slot-scope="scope">
                {{ scope.row.workingCity? scope.row.workingCity : '--' }}
              </template>
            </el-table-column>
            <el-table-column label="社保电脑号" prop="socialSecurityComputerNumber" :width="columnW">
              <template slot-scope="scope">
                {{ scope.row.socialSecurityComputerNumber? scope.row.socialSecurityComputerNumber : '--' }}
              </template>
            </el-table-column>
            <el-table-column label="公积金账号" prop="providentFundAccount" :width="columnW">
              <template slot-scope="scope">
                {{ scope.row.providentFundAccount? scope.row.providentFundAccount : '--' }}
              </template>
            </el-table-column>
            <el-table-column label="离职时间" prop="leaveDate" :width="columnW">

              <template slot-scope="scope">
                {{ scope.row.leaveDate? scope.row.leaveDate : '--' }}
              </template>
            </el-table-column>
            <el-table-column label="户籍类型" prop="householdRegistrationType" :width="columnW">
              <template slot-scope="scope">
                {{ scope.row.householdRegistrationType? hjList[scope.row.householdRegistrationType] : '--' }}
              </template>

            </el-table-column>
            <el-table-column label="参保城市" prop="participatingInTheCity" :width="columnW" />
            <el-table-column label="社保月份" prop="socialSecurityMonth" :width="columnW" />
            <el-table-column label="社保基数" prop="socialSecurityBase" :width="columnW" />
            <el-table-column label="社保合计" prop="socialSecurity" :width="columnW" />
            <el-table-column label="社保企业" prop="socialSecurityEnterprise" :width="columnW" />
            <el-table-column label="社保个人" prop="socialSecurityIndividual" :width="columnW" />
            <el-table-column label="公积金城市" prop="providentFundCity" :width="columnW" />
            <el-table-column label="公积金月份" prop="providentFundMonth" :width="columnW" />

            <el-table-column label="公积金基数" prop="providentFundBase" :width="columnW" />
            <el-table-column label="公积金企业基数" prop="accumulationFundEnterpriseBase" :width="columnW" />
            <el-table-column label="公积金比例" prop="proportionOfProvidentFundEnterprises" :width="columnW" />
            <el-table-column label="公积金合计" prop="totalProvidentFund" :width="columnW" />
            <el-table-column label="公积金企业" prop="providentFundEnterprises" :width="columnW" />
            <el-table-column label="公积金个人" prop="providentFundIndividual" :width="columnW" />

            <el-table-column label="养老企业基数" prop="pensionEnterpriseBase" :width="columnW" />
            <el-table-column label="养老企业比例" prop="proportionOfPensionEnterprises" :width="columnW" />
            <el-table-column label="养老企业" prop="pensionEnterprise" :width="columnW" />
            <el-table-column label="养老企业基数" prop="personalPensionBase" :width="columnW" />
            <el-table-column label="养老个人比例" prop="personalPensionRatio" :width="columnW" />
            <el-table-column label="养老个人" prop="oldAgeIndividual" :width="columnW" />

            <el-table-column label="失业企业基数" prop="unemploymentEnterpriseBase" :width="columnW" />
            <el-table-column label="失业企业比例" prop="proportionOfUnemployedEnterprises" :width="columnW" />
            <el-table-column label="失业企业" prop="unemployedEnterprise" :width="columnW" />
            <el-table-column label="失业个人基数" prop="theNumberOfUnemployedIndividuals" :width="columnW" />
            <el-table-column label="失业个人" prop="unemployedIndividual" :width="columnW" />

            <el-table-column label="医疗企业基数" prop="medicalEnterpriseBase" :width="columnW" />
            <el-table-column label="医疗企业比例" prop="proportionOfMedicalEnterprises" :width="columnW" />
            <el-table-column label="医疗企业" prop="medicalEnterprise" :width="columnW" />
            <el-table-column label="医疗个人基数" prop="medicalPersonalBase" :width="columnW" />
            <el-table-column label="医疗个人比例" prop="medicalPersonalRatio" :width="columnW" />
            <el-table-column label="医疗个人" prop="medicalIndividual" :width="columnW" />

            <el-table-column label="工伤企业基数" prop="baseOfIndustrialInjuryEnterprises" :width="columnW" />
            <el-table-column label="工伤企业比例" prop="proportionOfIndustrialInjuryEnterprises" :width="columnW" />
            <el-table-column label="工伤企业" prop="industrialInjuryEnterprise" :width="columnW" />

            <el-table-column label="生育企业基数" prop="fertilityEnterpriseBase" :width="columnW" />
            <el-table-column label="生育企业比例" prop="proportionOfFertilityEnterprises" :width="columnW" />
            <el-table-column label="生育企业" prop="childbearingEnterprise" :width="columnW" />

            <el-table-column label="大病企业基数" prop="baseOfSeriousIllness" :width="columnW" />
            <el-table-column label="大病企业比例" prop="proportionOfSeriouslyIllEnterprises" :width="columnW" />
            <el-table-column label="大病企业" prop="bigDiseaseEnterprise" :width="columnW" />
            <el-table-column label="大病个人基数" prop="personalBaseOfSeriousIllness" :width="columnW" />
            <el-table-column label="大病个人比例" prop="personalProportionOfSeriousIllness" :width="columnW" />
            <el-table-column label="大病个人" prop="aPersonOfGreatDisease" :width="columnW" />

            <el-table-column label="公积金备注" prop="providentFundNotes" :width="columnW" />
            <el-table-column label="社保备注" prop="socialSecurityNotes" :width="columnW" />

          </el-table>
        </el-row>
      </div>
    </el-card>

  </div>
</template>

<script>
import { getShistorysHistorysList, getShistorysHistorysMList, getShistorysHistorysExport } from '@/api/socialSecuritys'
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      selYear: '2020',
      showContent: false,
      tableData: [],
      isShowTable: false,
      tableData2: [],
      columnW: '120',
      hjList: ['本市', '外埠农村', '本市农村', '外埠农村', '本市城镇'],
      titleList: [{ name: '已离职', color: 'rgb(207, 239, 254)' },
        { name: '再入职', color: 'rgb(168, 248, 187)' },
        { name: '公司合计', color: 'rgb(254, 219, 215)' },
        { name: '一级部门', color: 'rgb(255, 232, 201)' },
        { name: '二级部门', color: 'rgb(253, 252, 213)' }]
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    async showTable() {
      this.isShowTable = !this.isShowTable
      if (this.isShowTable) {
        const res = await getShistorysHistorysMList({ yearMonth: this.selYear, opType: 2 })
        // console.log('showTable', res)
        this.tableData2 = res
      }
    },
    changeYear(val) {
    //   const date = new Date(val)
      this.showContent = false
      this.isShowTable = false
      if (val) {
        // this.selYear = date.getFullYear()
        // console.log('date', this.selYear)
        this.getTableData()
      }
    },
    async getTableData() {
      const res = await getShistorysHistorysList(this.selYear)
      console.log('getTableData', res)
      this.tableData = res
      this.tableData.length && (this.showContent = true)
    },
    async exportExcel() {
      const res = await getShistorysHistorysExport({ yearMonth: this.selYear, opType: 2 })
      console.log('exportExcel', res)
      FileSaver.saveAs(res, `${this.selYear}年社保归档.xlsx`)
    }
  }
}
</script>

<style scoped>
    .contentC{
        text-align: center;
        line-height: 70px;
    }
  .titleCard {
    border-bottom: 1px solid #e5e9f2;;
  }
.title {
    /* background: #99a9bf; */
    width: 100px;
    height: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    border-bottom: 2px black solid;
  }
    .archive {
        margin: 20px;
    }

    .content {
        /* margin-top: 30px; */
        height: 80px;
    }
    .content2{
        height: 500px;
        margin-top: 30px;
    }
</style>
